<!DOCTYPE html>
<html>

<head>
        <title>Bootstrap 实例 - bootstrapValidator插件方法</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="./bootstrapValidator.js"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <!-- form: -->
            <section>
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="page-header">
                        <h2>注册</h2>
                    </div>

                    <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
                        <div class="form-group"><!--bootstrapValidator使用时 html结构的input外面必须有一个类名为form-group的div-->
                            <label class="col-lg-3 control-label">姓名</label>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" name="firstName" required data-bv-trigger="keyup" data-bv-notempty-message="姓名不能为空"
                                    placeholder="姓" />
                            </div>
                            <div class="col-lg-4">
                                <input type="text" class="form-control" name="lastName" required data-bv-trigger="blur" data-bv-notempty-message="姓名不能为空"
                                    placeholder="名" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">用户名</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="username" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">邮箱</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control" name="email" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control" name="password" />
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">确认密码</label>
                            <div class="col-lg-5">
                                <input type="password" class="form-control" name="confirmPassword" />
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-9 col-lg-offset-3">
                                <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
                                <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
                            </div>
                        </div>
                    </form>
                </div>
            </section>
            <!-- :form -->
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#defaultForm').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    username: {
                        message: '用户名无效',
                        validators: {
                            notEmpty: {
                                message: '用户名不能位空'
                            },
                            stringLength: {
                                min: 6,
                                max: 30,
                                message: '用户名必须大于6，小于30个字'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '用户名只能由字母、数字、点和下划线组成'
                            },
                            different: {
                                field: 'password',
                                message: '用户名和密码不能相同'
                            }
                        }
                    },
                    email: {
                        validators: {
                            notEmpty: {
                                message: '邮箱不能为空'
                            },
                            emailAddress: {
                                message: '输入不是有效的电子邮件地址'
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能位空'
                            },
                            identical: {
                                field: 'confirmPassword',
                                message: '两次密码不一致'
                            },
                            different: {
                                field: 'username',
                                message: '用户名和密码不能相同'
                            }
                        }
                    },
                    confirmPassword: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            identical: {
                                field: 'password',
                                message: '两次密码不一致'
                            },
                            different: {
                                field: 'username',
                                message: '用户名和密码不能相同'
                            }
                        }
                    }
                }
            }).on('success.form.bv', function (e) {//成功之后点击submit会触发这个事件 bv是bootstrap validator的简称
                e.preventDefault();
                console.log($('#defaultForm').serialize());
                //接下来就可以使用ajax提交数据了
            });


            $('#resetBtn').click(function () {
                $('#defaultForm').data('bootstrapValidator').resetForm(true);
            });
        });
    </script>
</body>

</html>